<template>
	<view class="game">
		<view class="problemBox">
			<view class="oldman" v-if="false">
				<image src="https://maywork.oss-cn-shanghai.aliyuncs.com/idiom/laotou.png" class="img" mode="widthFix"></image>
			</view>
			<view class="problemImg">
				<image :src="'https://maywork.oss-cn-shanghai.aliyuncs.com/static/'+problemImg" class="img" mode="widthFix"></image>
			</view>
		</view>
		<view class="title">{{game.title}}</view>
		<view class="answer">
			<view class="answerBox" v-for="(item,index) in answerStr" :key="index" @tap="clearAnswer(index)">
				<view class="answerText" >
					<text class="text">{{item.text}}</text>
				</view>
			</view>	
			<view class="answerBox" v-for="(item,index) in fixedAnswer" :key="index">
				<view class="answerText" >
					<text class="text">{{item}}</text>
				</view>
			</view>		
		</view>
		<view class="btnBox">
			<!-- <view class="btn" @tap="promptAnswer" ><text class="title">提示</text></view>
			<view class="time">
				<image src="https://maywork.oss-cn-shanghai.aliyuncs.com/idiom/time.png" class="timeImg"></image>
				<text class="countdown">{{countdownNum}}s</text>
			</view> -->
			<!-- <view class="btn">
				<button type="default" open-type="share"><text class="title">求助</text></button>
				</view> -->
		</view>
		
		<view class="optionalAnswer">
			<view class="answerBox" v-for="(item,index) in optionalAnswer" :key="index" @tap="selectAnswer(index)">
				<view class="answerText" v-if="item!=''" >
					<text class="text">{{item}}</text>
				</view>
			</view>
		</view>
		<view v-if="checkResult=='success'">
			<SuccessModal :text="description" @next="nextCheckpoint" />
		</view>
		<view v-if="checkResult=='error'">
			<FailModal @continue="continueCheckpoint" :message="message" @jump="jumpCheckpoint" />
		</view>
	</view>
</template>

<script>
	import appData from "../js/data.js"
	import SuccessModal from "../components/successModal.vue"
	import FailModal from "../components/failModal.vue"
	import _ from "lodash"
	const audioContext = wx.createInnerAudioContext();

	let time = null
	let countdownTime = null
	export default {
		components:{SuccessModal,FailModal},
		data() {
			return {
				//测试代码
				gameIndex: 0,
				result: '',//结果
				message: '您还有一次机会',
				isPlay: false,//是否已玩
				game:{},
				problemImg:'',
				answerStr:'',
				optionalAnswer:'',
				fixedAnswer: [],
				proBlemIndex:0,
				checkResult:'await',
				description:'',
				promptNum:0,
				countdownNum:10
			};
		},
		onLoad({index}) {
			this.proBlemIndex = index
		},
		onShow() {
			this.parsingData()
		},
		onHide(){
			uni.removeStorageSync(this.game.id)
			uni.removeStorageSync("gameList")
		},
		
		methods:{
			//解析数据
			parsingData(){
				this.countdownNum=10
				this.promptNum=0
				this.checkResult = 'await'
				
				// const appData = uni.getStorageSync("gameList")
				
				const gameList = uni.getStorageSync("gameList")
				
				console.log("gameList=================",gameList)
				const serverDate = uni.getStorageSync("serverDate") || formatDate1(new Date().getTime())
				
				
				//测试 ojnKr7fVyfd691u93yNa6MGH8yT0 
				const memberInfo = uni.getStorageSync("memberInfo") || {}
				if(serverDate < '2025-05-18'){
					console.log("我来了")
					let gameIndex = uni.getStorageSync('gameIndex') || 0
					if(gameIndex >= 7) {
						gameIndex = 0
					}
					this.gameIndex = gameIndex
					this.game = gameList[gameIndex]
					console.log(this.game,"=================")
					// uni.setStorageSync('gameIndex',gameIndex + 1)
				}else{
					const game = gameList.filter(item => item.date === serverDate)
					console.log("game=========",game[0])
					this.game = game[0]
				}
				
				
				this.problemImg = this.game.problem
				let arr = []
				for(let i=0;i<this.game.answer.length;i++){
					arr.push({index:-1,text:''})
				}
				this.answerStr = arr
				
				let tmpArr = []
				let disturbStr = this.game.disturb
				for(let i=0;i<disturbStr.length;i++){
					tmpArr.push(disturbStr[i])
				}
				
				
				let fixedDisturb = this.game.fixedDisturb
				if(fixedDisturb){
					let fixedDisturbTmpArr = []
					for(let i=0;i<fixedDisturb.length;i++){
						fixedDisturbTmpArr.push(fixedDisturb[i])
					}
					this.fixedAnswer = fixedDisturbTmpArr
				}
				
				console.log("fixedAnswer======",this.fixedAnswer)
				
				this.optionalAnswer =_.shuffle(tmpArr) 
				
				this.description = this.game.description
				
			},
			
			//填充答案
			selectAnswer(pickIndex){
				audioContext.src = "https://maywork.oss-cn-shanghai.aliyuncs.com/idiom/btn.mp3";
				audioContext.play()
				
				let newList = this.answerStr
				try{
					newList.forEach((item,index)=>{
						if(item.text==''){
							newList[index].text=this.optionalAnswer[pickIndex]
							newList[index].index=pickIndex
							this.optionalAnswer[pickIndex] = ''
							throw new Error("EndIterative");
						}
					})
				}catch(error){
					if (error.message != "EndIterative") throw error;
				}
				this.answerStr = newList
				this.checkAnswer()
			},
			
			//清除答案
			clearAnswer(index){
				audioContext.src = "https://maywork.oss-cn-shanghai.aliyuncs.com/idiom/btn.mp3";
				audioContext.play()
				let newList = this.answerStr
				this.optionalAnswer[newList[index].index] = newList[index].text
				newList[index].text= ''
				newList[index].index=-1
				this.answerStr = newList
			},
			
			//检测答案
			checkAnswer(){
				let result = ''
				this.answerStr.find((item)=>{
					result+=item.text
				})
				
				if(result.length != this.game.answer.length){
					this.checkResult = 'await'
					return
				}
				
				if(result == this.game.answer){
					audioContext.src = "https://maywork.oss-cn-shanghai.aliyuncs.com/idiom/success.mp3";
					audioContext.play()
					this.checkResult = 'success'
					// clearInterval(countdownTime)
					this.result = '1'
					this.submitAnswer()
					uni.removeStorageSync(this.game.id)
					console.log('回答正确')
				}else{
					const anserCount = uni.getStorageSync(this.game.id) || 0
					if (anserCount + 1 >= 2) {
						this.message = "确 定"
						//错误两次后提交
						this.result = '0'
						this.submitAnswer()
					} 
					uni.setStorageSync(this.game.id, anserCount + 1)
					audioContext.src = "https://maywork.oss-cn-shanghai.aliyuncs.com/idiom/fail.mp3";
					audioContext.play()
					console.log('回答错误')
					// clearInterval(countdownTime)
					this.checkResult = 'error'
					
					
				}
			},
			
			submitAnswer(){
				if(this.game.isPlay){
					return
				}
				
				uni.setStorageSync(this.game.id + "_" + this.game.date, true)
				const memberInfo = uni.getStorageSync("memberInfo") || {}
				this.$request({
					method: "POST",
					header: {
						"Content-Type": "application/json"
					},
					data: {
						openid: memberInfo.userToken,
						dataid: this.game.id,
						answer: this.result,
						type: "3"
					},
					url: '/wx/addLog'
				})
				console.log("提交接口==================")
			},
			
			//下一关
			nextCheckpoint(){
				//测试代码
				uni.setStorageSync("gameIndex",this.gameIndex + 1)
				
				
				uni.removeStorageSync(this.game.id)
				this.checkResult = 'await'
				uni.navigateBack()
				// audioContext.src = "https://maywork.oss-cn-shanghai.aliyuncs.com/idiom/btn.mp3";
				// audioContext.play()
				// if(this.proBlemIndex>=appData.length-1){
				// 	uni.showToast({
				// 		title:'全部通关了',
				// 		duration: 2000,
				// 		complete:()=>{
				// 			time = setTimeout(()=>{
				// 				wx.reLaunch({
				// 				  url: '/pages/index/index'
				// 				})
				// 			},2000)
							
				// 		}
				// 	})
				// 	return
				// }
				// this.proBlemIndex++
				// uni.setStorageSync('checkpint',this.proBlemIndex)
				// this.parsingData()
			},
			
			//继续游戏
			continueCheckpoint(){
				const anserCount = uni.getStorageSync(this.game.id) || 0
				if(anserCount >= 2){
					//测试代码
					uni.setStorageSync("gameIndex",this.gameIndex + 1)
					
					uni.removeStorageSync(this.game.id)
					uni.navigateBack()
				}else{
					audioContext.src = "https://maywork.oss-cn-shanghai.aliyuncs.com/idiom/btn.mp3";
					audioContext.play()
					this.checkResult = 'await'
					this.parsingData()
				}
				
			},
			
			//跳过本关
			jumpCheckpoint(){
				audioContext.src = "https://maywork.oss-cn-shanghai.aliyuncs.com/idiom/btn.mp3";
				audioContext.play()
				this.nextCheckpoint()
			},
		},
		onUnload() {
			if(time){
				clearTimeout(time)
			}
			if(countdownTime){
				clearInterval(countdownTime)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.game{
		padding: 0 10px;
		background: #e6c612;
		background-image:url('https://maywork.oss-cn-shanghai.aliyuncs.com/static/bg-main.png');
		background-size:100%;
		background-repeat: no-repeat;
		height: 1408rpx;
	}
	.title{
		display: flex;
		height: 40rpx;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
	}
	.problemBox{
		
		width: 100%;
		height: 519rpx;
		// background-image:url('https://abrsm.tech/static/bg-main.png');
		// background-size:100%;
		// background-repeat: no-repeat;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		.problemImg{
			width: 600rpx;
			.img{
				width: 100%;
				border-radius: 10rpx;
			}
		}
	}
	.oldman{
		width: 220rpx;
		position:absolute;
		left: -10px;
		bottom: 0;
		.img{
			width: 100%;
		}
	}
	.answer{
		margin-top: 30px;
		display:flex;
		justify-content: center;
	}
	.answerBox{
		width: calc(100% / 6);
		height: 0;
		padding-bottom: calc(100% / 6);
		position: relative;
	}
	.answerText{
		position: absolute;
		left: 5rpx;
		right: 5rpx;
		bottom: 5rpx;
		top:5rpx;
		background: #FFEAA9;
		border: solid 2px #DF0024;
		display: flex;
		align-items: center;
		justify-content: center;
		.text{
			font-size:38rpx ;
		}
	}
	
	.btnBox{
		display: flex;
		justify-content: space-around;
		margin-top: 80rpx;
		.btn{
			width: 240rpx;
			height: 70rpx;
			background: #DF0024;
			border-radius: 35rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			&:active{
				opacity: .8;
			}
			.title{
				color: white;
			}
		}
		.time{
			display: flex;
			align-items: center;
			.timeImg{
				width: 50rpx;
				height: 50rpx;
			}
			.countdown{
				margin-left: 10rpx;
				color: white;
				font-size: 40rpx;
			}
		}
	}
	.optionalAnswer{
		margin-top:80rpx;
		display: flex;
		flex-wrap: wrap;
	}
	
	button{
		background-color:transparent !important;
		&:after{
				border: none;
		}
	}
</style>
